<template>
  <div class="Lyrics">
    <div class="content" :class="{'borde':obj.time!==''&&Styles.mode===1,'bordes':obj.time!==''&&Styles.mode===2}">
      <div class="icon " v-if="obj.time!==''"
           :style="{color: Styles.color}"
           :class="{'active':icon}"
           @click="Click(obj.time,index)">
        <!--<i class="iconfont icon-yinpin"></i>-->
        <icons :icons="icon"></icons>
      </div>
      <div :style="{color:Styles.color,fontSize:option.fontSize+'px',lineHeight:(option.fontSize+12)+'px'}" class="div">
        <span v-for="(a,i) in Text " v-html="a+'  '" @click="translate(a,i)" ref="Lyric"
              v-if="Text.indexOf('<img') === -1"></span>
        <div v-html="Text" v-if="Text.indexOf('<img') !== -1">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import icons from '../../components/icons/index'

  export default {
    name: "index",
    data: function () {
      return {}
    },
    components: {icons},
    mounted: function () {
    },
    computed: {
      Text: {
        get: function () {
          var str
          var a = ''
          if(this.obj.time){
            a = this.text.replace(/(?!<strong>)(?!<\/strong>)(?!<sup>)(?!<\/sup>)(?!<img(.*?)>)<.*?>/g, "")
          }else{
            a = this.text.replace(/(?!<p>)(?!<\/p>)(?!<strong>)(?!<\/strong>)(?!<sup>)(?!<\/sup>)(?!<img(.*?)>)<.*?>/g, "")
          }
          if (a.indexOf('<img') === -1) {
            str = a.split(' ')
          } else {
            str = a
          }
          return str
        }
      }
    },
    methods: {
      Click: function (Time, i) {
        var obj = {
          Time: Time,
          i: i
        }
        this.$emit('Click', obj)
      },
      translate: function (str, i) {
        // if (this.indexs !== -1) {
        //   this.$refs.span.childNodes[this.index].style.backgroundColor = '#fff'
        // } else {
        //   this.$refs.span.childNodes[i].style.backgroundColor = this.Color
        // }
        if (str === '') {
          return false
        }
        str = str.replace(/<\/?.+?\/?>/g, "")
        str = str.replace(/\(.+\)/g, "")
        str = str.match(/[a-zA-Z]+/gi).join('')
        if (str === '') {
          return false
        }
        this.$axios.translate({en: str}).then(res => {
          if (res.data.qing_code !== 100) {
            return false
          }
          res.data.qing_data.Word = str
          res.data.qing_data.Y = this.index
          res.data.qing_data.X = i
          this.$emit('WordShow', res.data.qing_data)
        })
      }
    },
    props: ['text', 'icon', 'option', 'obj', 'index', 'Styles']
  }
</script>

<style scoped>
  @import "./css/index.css";
</style>
